<template>
  <div class="emergency_box">
    <div class="emergency_top">
      <div class="emergency_title">交货及时率</div>
    </div>

    <div v-if="allData" class="echarts_container">
      <div id="consignmentTimely" class="col-md-12  col-sm-12 col-xs-12" style="height: 100%;" />
    </div>
    <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div>
  </div>
</template>

<script>
import { consignmentTimely } from '@/api/purchaseManage/purchaseStatistics/purchaseBoard'
import { mapGetters } from 'vuex'
export default {
  props: {
    targetNumber: {
      type: Number,
      default: 60
    }
  },
  computed: {
    ...mapGetters([
      'windowResizeTag'
    ])
  },
  watch: {
    windowResizeTag() {
      if (this.myChart || this.vertical) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.drawLine()
          }, 500)
        })
      }
    }
  },
  data() {
    return {
      msg: 'fafa',
      allData: [],
      overdueSum: [],
      myChart: undefined,
      timer: undefined
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.$nextTick(() => {
        this.drawLine()
      })
    }, this.$store.state.common.refreshFrequency * 1000)
  },
  created() {
    this.getOEEData()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getOEEData() {
      consignmentTimely().then(res => {
        this.allData = res.data
        this.overdueSum = []
        for (let i = 0; i < this.allData.length; i++) {
          this.overdueSum.push(this.targetNumber)
        }
        this.$nextTick(() => {
          this.drawLine()
        })
      })
    },
    drawLine() {
      if (this.myChart) {
        this.$echarts.init(document.getElementById('consignmentTimely')).dispose()
      }
      this.myChart = this.$echarts.init(document.getElementById('consignmentTimely'))
      this.myChart.setOption({
        legend: [
          {
            right: '2%',
            itemGap: 50,
            itemHeight: 10,
            itemWidth: 25,
            data: ['预警值', '及时率']
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let result = ''
            result += params[0].name + '</br>' + "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#F56C6C'></span>" + '预警值：' + params[1].value + '%' + '</br>' + "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#387BFD'></span>" + '及时率：' + params[0].value + '%'
            return result
          }
        },
        grid: {
          top: '35',
          left: '2%',
          right: '2%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(153, 153, 153, 0.3)'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#999999',
              fontSize: 14
            }
          },
          axisTick: {
            show: false
          },
          data: this.allData.map(item => item.month)
        }],
        yAxis: [{
          nameTextStyle: { // x轴name的样式调整
            padding: [0, 30, 0, 0]
          },
          type: 'value',
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: 'rgba(153, 153, 153, 0.3)',
              width: 1
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(153, 153, 153, 0.3)'
            }
          },
          axisLabel: {
            formatter: '{value}%',
            textStyle: {
              color: '#959FA9',
              fontSize: 14
            }
          }
        }],
        series: [
          {
            name: '及时率',
            type: 'line',
            symbolSize: 10, // 设置折线上圆点大小
            symbol: 'circle', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#387BFD'
              },
              lineStyle: {
                color: '#387BFD'
              }
            },
            silent: true,
            data: this.allData.map(item => item.rate)
          },
          {
            name: '预警值',
            type: 'line',
            silent: true,
            symbolSize: 10, // 设置折线上圆点大小
            symbol: 'circle', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: '#F56C6C'
              },
              lineStyle: {
                color: '#F56C6C'
              }
            },
            data: this.overdueSum
          }
        ]

      })
    }
  }
}
</script>

<style lang="less" scoped>
.emergency_box{
  width: 100%;
  height: calc(100% - 50px);
}
.emergency_top{
  display: flex;
  justify-content: space-between;
  .emergency_title{
    font-size: 20px;
    line-height: 34px;
    font-weight: bold;
    color: #333333;
    padding-top: 16px;
    padding-left: 20px;
  }
}

.echarts_container{
  width: 100%;
  height: 100%;
  padding:0 10px;
}
</style>

